<template>
  <div class="timely-rate">
    <div class="search-header">
      <el-date-picker
        v-model="queryParams.countYear"
        size="mini"
        type="year"
        value-format="yyyy"
        style="width: 160px;margin-right: 10px;"
        placeholder="请选择年份"
      />
      <el-select v-model="queryParams.countMonth" size="mini" style="width: 160px;" clearable placeholder="请选择月份">
        <el-option
          v-for="item in monthList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="queryParams.countLevels" placeholder="统计级别" size="mini" clearable style="width: 160px;margin-left: 10px;">
        <el-option v-for="dict in countLevels" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
      <el-input placeholder="输入内容" v-model.trim="toggleInput" size="mini" clearable @keyup.enter.native="handleQuery" style="width: 240px;margin-left: 10px;">
        <el-select v-model="toggleSelect" slot="prepend" style="width: 100px">
          <el-option label="项目名称" value="projectName" />
          <el-option label="集群" value="oneLevelOrgName" />
          <el-option label="事业部" value="twoLevelOrgName" />
          <el-option label="城市公司" value="threeLevelOrgName" />
        </el-select>
      </el-input>
      <div class="oprate-btn">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="dataChange">查询</el-button>
        <el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
        <el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="fileCheckItemLoading" @click="downloadCheckItemFile">铺排检查项导出</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="table"
      size="mini"
      style="width: 100%;"
      height="calc(100vh - 200px)"
    >
      <el-table-column
        label="集群"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.oneLevelOrgName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="事业部"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.twoLevelOrgName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="城市公司"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.threeLevelOrgName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目"
        min-width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.projectName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="集团检查（年度覆盖项目）" align="center">
        <el-table-column label="项目数" align="center">
          <el-table-column prop="jtNeedProNum" label="年度应检查" align="center" min-width="60" />
          <el-table-column prop="jtCmCheckProNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jtCheckProNum" label="年度已检查" align="center" min-width="60" />
          <el-table-column prop="jtCheckProRate" label="年度累计完成率" align="center" min-width="60" />
        </el-table-column>
        <el-table-column label="检查项数" align="center">
          <el-table-column prop="jtNeedItemNum" label="年度应检查" align="center" min-width="60" />
          <el-table-column prop="jtCmCheckItemNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jtCheckItemNum" label="年度已检查" align="center" min-width="60" />
          <el-table-column prop="jtCheckItemRate" label="年度累计完成率" align="center" min-width="60" />
        </el-table-column>
      </el-table-column>
      <el-table-column label="集群检查（季度覆盖项目）" align="center">
        <el-table-column label="项目数" align="center">
          <el-table-column prop="jqNeedProNum" label="季度应检查" align="center" min-width="60" />
          <el-table-column prop="jqCmCheckProNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jqCheckProNum" label="季度已检查" align="center" min-width="60" />
          <el-table-column prop="jqCheckProRate" label="季度累计完成率" align="center" min-width="60" />
        </el-table-column>
        <el-table-column label="检查项数" align="center">
          <el-table-column prop="jqNeedItemNum" label="季度应检查" align="center" min-width="60" />
          <el-table-column prop="jqCmCheckItemNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jqCheckItemNum" label="季度已检查" align="center" min-width="60" />
          <el-table-column prop="jqCheckItemRate" label="季度累计完成率" align="center" min-width="60" />
        </el-table-column>
      </el-table-column>
      <el-table-column v-if="belongType === cq_pe_belong_system.ENGINEER" label="集群售后展示区检查" align="center">
        <el-table-column label="项目数" align="center">
          <el-table-column prop="jqSplitNeedProNum" label="年度应检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCmCheckProNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCheckProNum" label="年度已检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCheckProRate" label="年度累计完成率" align="center" min-width="60" />
        </el-table-column>
        <el-table-column label="检查项数" align="center">
          <el-table-column prop="jqSplitNeedItemNum" label="年度应检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCmCheckItemNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCheckItemNum" label="年度已检查" align="center" min-width="60" />
          <el-table-column prop="jqSplitCheckItemRate" label="年度累计完成率" align="center" min-width="60" />
        </el-table-column>
      </el-table-column>
      <el-table-column label="事业部自查（月度覆盖项目）" align="center">
        <el-table-column label="项目数" align="center">
          <el-table-column prop="sybNeedProNum" label="月度应检查" align="center" min-width="60" />
          <el-table-column prop="sybCmCheckProNum" label="当月检查" align="center" min-width="60" />
          <el-table-column prop="sybCheckProRate" label="月度累计完成率" align="center" min-width="60" />
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { gatherChkprocessReport, chkProcessExportReport, exportNeed } from '@/api/cqPe/statement'
import { monthList} from '../../../utils/baseData'
import { cq_pe_belong_system } from '@/utils/baseData'

export default {
  name: 'EngineerTable',
  filters: {
    rate(val) {
      let rval = ''
      rval = (val * 100).toFixed(2)
      return rval + '%'
    }
  },
  props: {
    belongType: {
      type: String,
      default: () => cq_pe_belong_system.ENGINEER
    }
  },
  data() {
    return {
      cq_pe_belong_system,
      table: [],
      loading: false,
      fileLoading: false,
      fileCheckItemLoading: false,
      yearMonth: '',
      queryParams: {
        belongType: '',
        countYear: '',
        countMonth: '',
        countLevels: ''
      },
      dataSourceKey: '',
      monthList: monthList,
      countLevels: [
        // { value: '1', label: '集群'},
        { value: '2', label: '事业部'},
        { value: '3', label: '城市公司'},
        { value: '9', label: '项目'}
      ],
      orgSelected: [],
      toggleInput: '',
      toggleSelect: 'projectName'
    }
  },
  created() {
    const month = new Date()
    month.setMonth(month.getMonth() - 1)
    this.queryParams.countYear = month.getFullYear() + ''
    this.queryParams.countMonth = month.getMonth() + 1 + ''
    this.queryParams.belongType = this.belongType
    this.init()
  },
  methods: {
    handleOrgChange(val) {
      console.log(val)
    },
    yearMonthChange(value) {
      if (value) {
        const ymArr = value.split('-')
        this.queryParams.countYear = ymArr[0]
        this.queryParams.countMonth = ymArr[1]
        this.init()
      }
    },
    handleQuery() {
      this.init()
    },
    init() {
      this.loading = true
      const opt = {
        ...this.queryParams
      }
      opt[this.toggleSelect] = this.toggleInput
      gatherChkprocessReport(opt).then(
        (response) => {
          if (response.code === 200) {
            const list = response.data
            list.forEach(item => {
              item.uniqueId = item.twoLevelOrgId
              setRate(item)
            })
            this.table = list
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
      const self = this
      function setRate(item) {
        // 集团 项目  年度累计完成率
        item.jtCheckProRate = '0%'
        if (item.jtNeedProNum) {
          item.jtCheckProRate = parseInt(item.jtCheckProNum / item.jtNeedProNum * 10000) / 100 + '%'
        }
        // 集团 检查项 年度累计完成率
        item.jtCheckItemRate = '0%'
        if (item.jtNeedItemNum) {
          item.jtCheckItemRate = parseInt(item.jtCheckItemNum / item.jtNeedItemNum * 10000) / 100 + '%'
        }
        // 集群 项目  季度累计完成率
        item.jqCheckProRate = '0%'
        if (item.jqNeedProNum) {
          item.jqCheckProRate = parseInt(item.jqCheckProNum / item.jqNeedProNum * 10000) / 100 + '%'
        }
        // 集群 检查项 季度累计完成率
        item.jqCheckItemRate = '0%'
        if (item.jqNeedItemNum) {
          item.jqCheckItemRate = parseInt(item.jqCheckItemNum / item.jqNeedItemNum * 10000) / 100 + '%'
        }
        // 工程 有售后展示区
        if (self.belongType === cq_pe_belong_system.ENGINEER) {
          // 售后展示区 项目  年度累计完成率
          item.jqSplitCheckProRate = '0%'
          if (item.jqSplitNeedProNum) {
            item.jqSplitCheckProRate = parseInt(item.jqSplitCheckProNum / item.jqSplitNeedProNum * 10000) / 100 + '%'
          }
          // 售后展示区 检查项 年度累计完成率
          item.jqSplitCheckItemRate = '0%'
          if (item.jqSplitNeedItemNum) {
            item.jqSplitCheckItemRate = parseInt(item.jqSplitCheckItemNum / item.jqSplitNeedItemNum * 10000) / 100 + '%'
          }
        }
        // 事业部 项目  月度累计完成率
        item.sybCheckProRate = '0%'
        if (item.sybNeedProNum) {
          item.sybCheckProRate = parseInt(item.sybCmCheckProNum / item.sybNeedProNum * 10000) / 100 + '%'
        }
      }
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      const opt = {
        ...this.queryParams
      }
      opt[this.toggleSelect] = this.toggleInput
      chkProcessExportReport(opt).then(file => {
        const belongName = this.belongType === cq_pe_belong_system.ENGINEER ? '工程' : '设计'
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = `项目抽球${belongName}报表.xlsx`
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    // 铺排检查项导出
    downloadCheckItemFile() {
      this.fileCheckItemLoading = true
      const opt = {
        month: this.queryParams.countMonth,
        year: this.queryParams.countYear
      }
      exportNeed(opt).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = `铺排检查项报表.xlsx`
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileCheckItemLoading = false
      })
    },
    dataChange() {
      this.init()
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    .search-header{
      margin: 10px 0;
      .oprate-btn {
        display: inline-block;
        margin-left: 30px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
